<template>
  <el-row v-loading="loading" :gutter="8" class="introduce">
    <el-col v-bind="attarSpan">
      <div class="introduce_item">
        <div class="introduce_item_top">
          <div>今日总销售额</div>
          <Trend :flag="parseFloat(dataList.ratio) <= 0 ? 'up' : 'down'" class="assimilate">
            <span class="ratio" :style="parseFloat(dataList.ratio) <= 0?'color:red':'color:#54FF00' ">
             {{ dataList.ratio?dataList.ratio.replace(/^-/, ''):0  }}
            </span>
          </Trend>
<!--          <div>{{dataList.ratio || 0}}</div>-->
        </div>
        <div class="introduce_item_price">{{dataList.day_amount || 0}}</div>
        <div class="introduce_item_center">
          <div>收款笔数：{{dataList.day_num || 0}}</div>
          <div>手续费：{{dataList.day_fee || 0}}</div>
        </div>
        <div class="introduce_item_bom">
          <div class="introduce_item_bom_item">本月收款总额：{{dataList.month_amount || 0}}</div>
<!--          <div class="introduce_item_bom_item">本月收款手续费：{{dataList.month_num || 0}}</div>-->
        </div>
      </div>
    </el-col>
    <el-col v-bind="attarSpan">
      <div class="introduce_item"  style="background: linear-gradient( 135deg, #21C8E4 0%, #20A9E0 100%);">
        <div class="introduce_item_top">
          <div>今日代付交易额</div>
          <Trend :flag="parseFloat(dataListDf.ratio) <= 0 ? 'up' : 'down'" class="assimilate">
            <span class="ratio" :style="parseFloat(dataListDf.ratio) <= 0?'color:red':'color:#54FF00' ">
             {{ dataListDf.ratio?dataListDf.ratio.replace(/^-/, ''):0  }}
            </span>
          </Trend>
        </div>
        <div class="introduce_item_price">{{dataListDf.day_amount || 0}}</div>
        <div class="introduce_item_center">
          <div>收款笔数：{{dataListDf.day_num || 0}}</div>
          <div>手续费：{{dataListDf.day_fee || 0}}</div>
        </div>
        <div class="introduce_item_bom" style="background: #04A2DC;">
          <div class="introduce_item_bom_item">本月代付总额：{{dataListDf.month_amount || 0}}</div>
<!--          <div class="introduce_item_bom_item">本月代付手续费：{{dataListDf.month_num || 0}}</div>-->
      </div>
      </div>
    </el-col>
    <el-col v-bind="attarSpan">
      <div class="introduce_item"  style="background: linear-gradient( 134deg, #79BBF2 0%, #6296E7 100%);">
        <div class="introduce_item_top">
          <div>今日新增客户</div>
          <Trend :flag="parseFloat(dataListKh.ratio) <= 0 ? 'up' : 'down'" class="assimilate">
            <span class="ratio" :style="parseFloat(dataListKh.ratio) <= 0?'color:red':'color:#54FF00' ">
             {{ dataListKh.ratio?dataListKh.ratio.replace(/^-/, ''):0  }}
            </span>
          </Trend>
        </div>
        <div class="introduce_item_price">{{dataListKh.today || 0}}</div>
        <div class="introduce_item_center">
          <div>昨日新增：{{dataListKh.yesterday || 0}}</div>
<!--          <div>手续费：100</div>-->
        </div>
        <div class="introduce_item_bom" style="background: #598DEA">
          <div class="introduce_item_bom_item">本月收款总额：{{dataListKh.month || 0}}</div>
<!--          <div class="introduce_item_bom_item">本月收款手续费：5000</div>-->
        </div>
      </div>
    </el-col>
    <el-col v-bind="attarSpan">
      <div class="introduce_item"  style="background: linear-gradient( 135deg, #21C8E4 0%, #20A9E0 100%);">
        <div class="introduce_item_top">
          <div>服务费余额</div>
          <div class="introduce_item_progress" v-if="dataListLs.ratio">
<!--            <el-progress :width="70" type="circle" :percentage=" parseFloat(dataListLs.ratio.replace('%', ''))" status="success">-->
<!--              <template #default="{ percentage }">-->
<!--                <span class="percentage-value">{{percentage }}%</span>-->
<!--              </template>-->
<!--            </el-progress>-->
          </div>
        </div>
        <div class="introduce_item_price">{{dataListLs.target_amount || 0}}</div>
        <div class="introduce_item_center">
<!--          <div>当前总收款：{{dataListLs.pay_amount || 0}}</div>-->
<!--          <div>当前总代付：{{dataListLs.send_amount || 0}}</div>-->
        </div>
        <div class="introduce_item_bom" style="height: 72px;background:transparent;opacity: 1">
          <div class="introduce_item_bom_cz" @click="handleFormShow">充值</div>
<!--          <div class="introduce_item_bom_item">距离目标还差：{{dataListLs.short_amount || 0}}</div>-->
<!--          <div class="introduce_item_bom_item">倒计时：{{dataListLs.short_day || 0}}</div>-->
        </div>
      </div>
    </el-col>
    <serviceRecharge ref="formRef"></serviceRecharge>
  </el-row>
</template>

<script lang="ts" setup>
import IntroduceItem from './introduce-item.vue';
import Trend from '@/components/trend/index.vue';
import useLoading from '@/hooks/use-loading';
import { ref } from 'vue';
import { consoleHeader, ConsoleHeader } from '@/api/dashboard.ts';
import { toPercent } from '@/utils';
import  serviceRecharge from './serviceRecharge.vue'
const attarSpan = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
};
const [loading, setLoading] = useLoading(true);

const dataList = ref({});
const dataListDf = ref({});
const dataListKh=ref({});
const dataListLs=ref({})
const fetchDataList = async () => {
  setLoading(true);
  try {
    dataList.value = {}
    const {body} = await consoleHeader({action:'info',mode:"pay"});
    dataList.value=body
  } catch (err) {
  } finally {
    setLoading(false);
  }
  try {
    dataListDf.value={}
    const {body} = await consoleHeader({action:'info',mode:"send"});
    dataListDf.value=body
  } catch (err) {
  } finally {
    setLoading(false);
  }
  try {
    dataListKh.value={}
    const {body} = await consoleHeader({action:'info',mode:"merchant"});
    dataListKh.value=body
  } catch (err) {
  } finally {
    setLoading(false);
  }
  try {
    dataListLs.value={}
    const {body} = await consoleHeader({action:'info',mode:"target"});
    dataListLs.value=body
  } catch (err) {
  } finally {
    setLoading(false);
  }
  // dataList.value = data;
};
const formRef = ref<any>()
const handleFormShow = () => {
  formRef.value.open()
}
fetchDataList();

</script>

<style lang="scss" scoped>
.introduce {
  > .el-col {
    margin-bottom: 8px;
  }

  .assimilate {
    .ratio {
      margin-left: 5px;
    }
  }

  .progress {
    width: 100%;

    :deep(.el-progress__text) {
      font-size: 14px !important;
    }
  }
  .introduce_item{
    //width: 288px;
    //height: 180px;
    background: linear-gradient( 135deg, #49A3FF 0%, #418DFB 100%);
    border-radius: 2px;
    //

    color: #fff;
  }
  .introduce_item_top{
    display: flex;
    padding: 14px 20px 0 20px;
    box-sizing: border-box;
    justify-content: space-between;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    font-style: normal;
    position: relative;
  }
  .introduce_item_progress{
    position: absolute;
    top: 10px;
    right: 20px;
  }
  .percentage-value{
    color: #fff;
    font-size: 14px;
  }
  .introduce_item_price{
    padding: 0 20px;
    box-sizing: border-box;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 28px;
    margin: 6px 0;
    line-height: 38px;
    font-style: normal;
  }
  .introduce_item_center{
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    line-height: 22px;
    text-align: left;
    font-style: normal;
    margin-bottom: 16px;
  }
  .introduce_item_bom{
    //width: 288px;
    //height: 66px;
    background: #296BF3;
    border-radius: 0px 0px 2px 2px;
    opacity: 0.7;
    padding: 14px 20px;
    box-sizing: border-box;
    .introduce_item_bom_cz{
      float: right;
      //display: inline-block;
      //text-align: r;
      cursor: pointer;
      background: #FFFFFF;
      border-radius: 6px;
      padding: 8px 32px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #2085FF;
    }
    .introduce_item_bom_item{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: rgba(255,255,255,0.85);
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }
  }
}
</style>
